<template>
	<div>
		<div :class="inputWrapperClass">
			<template v-if="addonBefore">
				<div class="el-input-group__prepend">{{ addonBefore }}</div>
			</template>
			<InputNumber
				v-model="innerValue"
				v-thousands
				:placeholder="placeholder"
				:max="max"
				:min="min"
				:step="step"
				:precision="precision"
				:disabled="disabled"
				:size="size"
				:controls-position="controlsPosition === 'right' ? 'right' : ''"
				:controls="controlsPosition"
				:style="{ width: css.width + 'px' }"
				@change="onValueChange"
				@blur="onBlur"
			/>
			<template v-if="addonAfter">
				<div class="el-input-group__append">{{ addonAfter }}</div>
			</template>
		</div>

		<p v-if="isAmountChinese" class="amountChinese">{{ amountChineseName }}</p>
	</div>
</template>

<script>
import { thousandsFormat } from '../../utils';
import convertToChineseNumber from 'number2chinesenumber';
import { InputNumber } from 'element-ui';

export default {
	name: 'McInputNumber',
	components: {
		InputNumber,
	},
	props: {
		css: {
			type: Object,
			default: () => ({ width: null }),
		},
		controlsPosition: {
			type: String,
			default: '',
		},
		value: {
			type: [Number, String],
			default: undefined,
		},
		max: {
			type: Number,
			default: Infinity,
		},
		min: {
			type: Number,
			default: null,
		},
		step: {
			type: Number,
			default: 1,
		},
		precision: {
			type: Number,
			default: 0,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		thousands: {
			type: Boolean,
			default: false,
		},
		isAmountChinese: {
			type: Boolean,
			default: false,
		},
		addonBefore: {
			type: String,
			default: '',
		},
		size: {
			type: String,
			default: '',
		},
		placeholder: {
			type: String,
			default: '数字文本',
		},
		addonAfter: {
			type: String,
			default: '',
		},
		readonly: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			innerValue: this.value || undefined,
			amountChineseName: '',
		};
	},
	computed: {
		inputWrapperClass() {
			const classes = [];
			if (this.addonBefore) classes.push('addonBefore');
			if (this.addonAfter) classes.push('addonAfter');
			return classes.join(' ');
		},
	},
	watch: {
		innerValue: {
			handler(val) {
				if (val !== this.value) {
					this.$emit('input', val);
					this.$emit('change', val);
					this.amountChinese(val);
				}
			},
			immediate: true,
			deep: true,
		},
		value(val) {
			if (val !== this.innerValue) {
				this.innerValue = val;
				this.amountChinese(val);
			}
		},
		isAmountChinese() {
			this.amountChinese(this.innerValue);
		},
	},
	methods: {
		amountChinese(val) {
			if (!this.isAmountChinese) return;
			this.amountChineseName = convertToChineseNumber(val, 'maxAmount');
		},
		onValueChange() {
			if (this.innerValue === undefined) this.innerValue = null;
		},
		onBlur(event) {
			this.$emit('blur', event);
		},
	},
};
</script>

<style lang="scss" scoped>
.input-number {
	::v-deep .el-input__inner {
		text-align: left;
	}
}

.addonBefore,
.addonAfter {
	width: 100%;
	::v-deep .el-input__inner {
		border-radius: unset !important;
	}
}

.addonBefore {
	::v-deep .el-input__inner {
		border-top-left-radius: unset !important;
		border-bottom-left-radius: unset !important;
	}
}

.addonAfter {
	::v-deep .el-input__inner {
		border-radius:4px 0 0 4px;
	}
}

.amountChinese {
	color: #c0c0c0;
}
</style>